<?php include('header.php'); ?>
<?php include('side.php'); ?>


<div class="layui-body">
	<form class="layui-form layui-form-pane" action="" onsubmit="return false;">
		<div class="layui-form-item" style="margin-top: 20px;">
			<div class="layui-inline">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-inline">
					<select name="status" lay-filter="status">
						<option value="-1">全部</option>
						<option value="0">未验证</option>
						<option value="1">已验证</option>
						<option value="2">已锁定</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">搜索</label>
				<div class="layui-input-inline">
					<input type="text" name="keywords" lay-verify="keywords" lay-filter="keywords" autocomplete="off" placeholder="姓名/手机/邀请人/桌号/邀请码" class="layui-input" />
				</div>
			</div>
			<div class="layui-inline">
				<button name="execute" class="layui-btn layui-btn-normal">执行</button>
			</div>
		</div>
	</form>

	<fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;">
		<legend>搜索结果<span style="color: #BBA;font-size: 14px">（ <span id="count">0</span> 条记录）</span></legend>
	</fieldset>

	<table id="list" lay-filter="list"></table>
</div>

<script type="text/html" id="genderTpl">
	<input type="checkbox" name="gender" value="{{d.id}}" lay-skin="switch" lay-text="男|女" lay-filter="gender" {{ d.gender == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="buttonBar">
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="validate">{{ d.status == 1 ? '取消验证' : '确认验证' }}</a>
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="lock">{{ d.status == 2 ? '取消锁定' : '确认锁定' }}</a>
</script>

<script>
	layui.use('table', function() {
		var table = layui.table,
		form = layui.form;
		var keywords = $('input[name="keywords"]').val();
		var url = '/site/get_list?k=';
		url += keywords == '' ? 'camelliae' : keywords;
		table.render({
			elem: '#list',
			url: url,
			cols: [[
				{field: 'id', width: 60, title: 'ID', sort: true},
				{field: 'token', width: 80, title: '邀请码', sort: true},
				{field: 'name', width: 160, title: '姓名', sort: false, edit: 'text'},
				{field: 'tnumber', width: 200, title: '桌号', sort: true, edit: 'text'},
				{field: 'mobile', width: 200, title: '手机号', sort: false, edit: 'text', templet: function(res) {
					return windos.formatMobile(res.mobile, 0);
				}},
				{field: 'inviter', width: 140, title: '邀请人', sort: false, edit: 'text'},
				//{field: 'gender', width: 100, title: '性别', sort: false, templet: '#genderTpl', unresize: true},
				{field: 'status', width: 80, title: '状态', sort: true, templet: function(res) {
					if (res.status == 0) {
						return '<span style="color: #FF4303">未验证</span>';
					} else if(res.status == 1) {
						return '<span style="color: #0580FF">已验证</span>';
					} else if(res.status == 2) {
						return '<span style="color: CCCCCC">已锁定</span>';
					}
				}},
				{field: 'confirm_time', width: 180, title: '确认时间', sort: true, templet: function(res) {
					if (res.confirm_time) {
						return windos.formatDate(res.confirm_time, 0);
					} else {
						return '';
					}
					
				}},
				{fixed: 'right', width:180, title:'操作', toolbar: '#buttonBar'}
			]],
			even: true,
			done: function(res, curr, count) {
				$('#count').html(count);
			}
		});
		
		table.on('edit(list)', function(obj) {
			var value = obj.value,
			data = obj.data,
			field = obj.field;
			var postdata = {id: data.id, field: field, value: value};
			windos.ajaxPost('/site/save', postdata, function(res) {
				if (res.status == 1) {
						//layer.msg('编辑完成');
					} else {
						layer.msg('编辑失败');
					}
					console.log(res);
			});
			
		});
		
		form.on('switch(gender)', function(obj) {
			var value = this.value;
			if (obj.elem.checked) {
				value = 1;
			} else {
				value = 0;
			}
			var postdata = {id: this.value, field: this.name, value: value};
			windos.ajaxPost('/site/save', postdata, function(res) {
				if (res.status == 1) {
						//layer.msg('编辑完成');
					} else {
						layer.msg('编辑失败');
					}
					console.log(res);
			});
		});
		
		table.on('tool(list)', function(obj) {
			var data = obj.data;
			var value;
			if (obj.event == 'validate') {
				value = data.status == 0 || data.status == 2 ? 1 : 0;
			} else if (obj.event == 'lock') {
				value = data.status == 0 || data.status == 1 ? 2 : 0;
			}
			var postdata = {id: data.id, field: 'status', value: value};
			windos.ajaxPost('/site/save', postdata, function(res) {
				if (res.status == 1) {
						table.reload('list');
						//layer.msg('编辑完成');
					} else {
						layer.msg('操作失败');
					}
					console.log(res);
			});
		});
		
		form.verify({
			keywords: function(value) {
			  if(value.length < 1){
				return '搜索关键词不能为空';
			  }
			}
		});
		
		$('input[name="keywords"]').bind('keyup', function(event) {
			var othis = $(this);
			var code = event.keyCode || event.which || event.charCode;
			if (code == 13) {
				tableReload();
			}
		}).bind('focus', function() {
			$(this).val('');
		});
		
		form.on('select(status)', function(data) {
			tableReload();
		});
		
		$('button[name="execute"]').bind('click', function(event) {
			tableReload();
		});
		
		function tableReload() {
			var keywords = $('input[name="keywords"]').val();
			var status = $('select[name="status"]').val();
			if (keywords == '') keywords = 'camelliae';
			table.reload('list', {
				url: '/site/get_list?k=' + keywords + '&s=' + status
			});
		}
		
	});
	

</script>

<?php include('footer.php'); ?>